function lunb() {
    // 获取主图片元素
    let mainImage = document.querySelector('.main-image');
    // 获取放大图片展示容器元素
    let zoomedImage = document.querySelector('.zoomed-image');
    // 获取小图片列表元素，这里获取所有的小图片
    let thumbnailLinks = document.querySelectorAll('.lunb_index a');
    // 获取规格选项元素
    let specOptions = document.querySelectorAll('.spec-option');
    // 获取图片序号显示元素
    let imageCounter = document.querySelector('.image-counter');
    // 获取左右按钮元素
    let btnLeft = document.querySelector('.btn_left');
    let btnRight = document.querySelector('.btn_right');

    // 图片总数
    let totalImages = thumbnailLinks.length;
    // 当前显示的图片索引，初始为 0
    let currentIndex = 0;
    // 当前显示的 ul 列表索引
    let currentUlIndex = 0;
    // 获取所有 ul 元素
    let ulElements = document.querySelectorAll('.lunb_index ul');

    // 更新图片序号显示
    function updateImageCounter() {
        imageCounter.textContent = `${currentIndex + 1} / ${totalImages}`;
    }

    // 鼠标移动事件处理函数，实现图片放大效果
    mainImage.addEventListener('mousemove', function (e) {
        let rect = mainImage.getBoundingClientRect();
        let x = e.clientX - rect.left;
        let y = e.clientY - rect.top;

        zoomedImage.style.display = 'block';
        zoomedImage.style.backgroundImage = `url(${mainImage.src})`;
        zoomedImage.style.backgroundPosition = `-${x * 2 - zoomedImage.offsetWidth / 2}px -${y * 2 - zoomedImage.offsetHeight / 2}px`;
    });

    // 鼠标移出事件处理函数，隐藏放大图片
    mainImage.addEventListener('mouseleave', function () {
        zoomedImage.style.display = 'none';
    });

    // 小图片点击事件处理函数，切换主图片
    thumbnailLinks.forEach((link, index) => {
        let thumbnail = link.querySelector('img');
        link.addEventListener('click', function (e) {
            e.preventDefault(); // 阻止链接的默认跳转行为
            mainImage.src = thumbnail.src.replace('80', '560');
            currentIndex = index;
            updateImageCounter();
        });
    });

    // 规格选项点击事件处理函数，切换选中状态
    specOptions.forEach((option) => {
        option.addEventListener('click', function () {
            specOptions.forEach((opt) => opt.classList.remove('selected'));
            this.classList.add('selected');
        });
    });

    // 左右按钮点击事件处理函数
    function handleButtonClick(direction) {
        ulElements[currentUlIndex].style.opacity = 0;
        ulElements[currentUlIndex].style.transform = 'translateX(100%)';
        if (direction === 'left') {
            currentUlIndex = (currentUlIndex - 1 + ulElements.length) % ulElements.length;
        } else {
            currentUlIndex = (currentUlIndex + 1) % ulElements.length;
        }
        ulElements[currentUlIndex].style.opacity = 1;
        ulElements[currentUlIndex].style.transform = 'translateX(0)';
    }

    btnLeft.addEventListener('click', function () {
        handleButtonClick('left');
    });

    btnRight.addEventListener('click', function () {
        handleButtonClick('right');
    });

    // 初始更新图片序号显示
    updateImageCounter();
}
function check() {
    let box1 = document.querySelector(".version_box1");
    let box2 = document.querySelector(".version_box2");
    let boxs = document.querySelectorAll(".box");

    let Service_box = document.querySelectorAll(".Service_box");

    box1.classList.add("active");

    boxs.forEach(box => {
        box.addEventListener("mouseover", function () {
            if (!this.classList.contains("active")) {
                this.classList.add("hoverClass");
            }
        });
        box.addEventListener("mouseout", function () {
            this.classList.remove("hoverClass");
        });
    });

    box2.addEventListener("click", function () {
        box2.classList.add("active");
        box1.classList.remove("active");
    });

    box1.addEventListener("click", function () {
        box1.classList.add("active");
        box2.classList.remove("active");
    });

    let Service_box_first = Service_box[0];
    Service_box_first.classList.add("Service_active");

    Service_box.forEach(function (s) {
        s.addEventListener("mouseover", function () {
            this.classList.add("Service_hover_Class");
        });
        s.addEventListener("mouseout", function () {
            this.classList.remove("Service_hover_Class");
        });
        s.addEventListener("click", function () {
            Service_box.forEach(function (item) {
                item.classList.remove("Service_active");
            });
            this.classList.add("Service_active");
        });
    });
}
check();
lunb();